<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="app">
        <header>
            <nav>
                <a href="#" @click="switchView('square')">正方形</a>
                <a href="#" @click="switchView('triangle')">三角形</a>
                <a href="#" @click="switchView('circle')">圆形</a>
                <a href="#" @click="switchView('egg')">椭圆形</a>
            </nav>
        </header>
        
        <component :is="currentView" transition="switch"></component>
    </div>

    <template id="square-template">
        <div class="square"></div>
    </template>

    <template id="circle-template">
        <div class="circle"></div>
    </template>

    <template id="triangle-template">
        <div class="triangle"></div>
    </template>

    <template id="egg-template">
        <div class="egg"></div>
    </template>

    <script src="js/vue.min.js"></script>
    <!-- <script src="main.js"></script> -->
	<script type="text/javascript">
		new Vue({
		    el: "#app",
		    data: {
		        currentView: 'square'
		    },
		    components: {
		        square: {
		            template: '#square-template'
		        },
		        triangle: {
		            template: '#triangle-template'
		        },
		        circle: {
		            template: '#circle-template'
		        },
		        egg: {
		            template: '#egg-template'
		        }
		    },
		    methods: {
		        switchView: function(view) {
		            this.currentView = view
		        }
		    }
		})
	</script>
	
	<style type="text/css">
		* {
		    box-sizing: border-box;
		}
		
		body {
		    padding: 0;
		    margin: 0;
		    font-family: 'Roboto', sans-serif;
		}
		
		header {
		    position: fixed;
		    top: 0;
		    left: 0;
		    right: 0;
		    height: 48px;
		}
		
		nav {
		    list-style:none;
		    margin:0;
		    padding:0;
		    text-align:center;
		}
		
		nav a {
		    display: inline-block;
		    padding: 16px 20px;
		    text-decoration: none;
		    color:  #8a8d96;
		    font-weight: 400;
		}
		
		nav a:hover {
		    color: #272727;
		}
		
		/* Фигуры */
		.square, 
		.triangle, 
		.circle,
		.egg {
		    position: absolute;
		    top: 120px;
		    left: 50%;
		}
		
		.square {
		    width: 240px;
		    height: 240px;
		    background-color: #00bcd4;
		    margin-left: -120px;
		}
		
		.triangle {
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 0 120px 207.8px 120px;
		    border-color: transparent transparent #3f51b5 transparent;
		    margin-left: -120px;
		}
		
		.circle {
		    width: 240px;
		    height: 240px;
		    border-radius: 50%;
		    background-color: #cddc39;
		    margin-left: -120px;
		}
		
		.egg {
		    width: 168px;
		    height: 240px;
		    background-color: #ffc107;
		    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		    margin-left: -84px;
		}
		
		.switch-transition {
		    transition: all .5s ease-in-out;
		}
		
		.switch-enter {
		    left: 100%;
		}
		
		.switch-leave {
		    left: -100%;
		}
	</style>
</body>
</html>